{% load i18n static simpletags %}

{#{% block blockbots %}#}
{#<meta name="robots" content="NONE,NOARCHIVE"/>#}
{#<!-- ECharts单文件引入 -->#}
{#<script src="https://cdn.bootcss.com/echarts/3.7.1/echarts.min.js"></script>#}
{#<script src="http://echarts.baidu.com/build/dist/echarts.js"></script>#}
{##}
{#{% endblock %}#}


<div id="home">


{#<button onclick="jump_to()">点击跳转111</button>#}
{#<button @click="openUrl('https://gitee.com/tompeppa/simpleui')">点击跳转222</button>#}
    <el-row class="info-card">

        {% if "SIMPLEUI_HOME_QUICK"|get_config != False%}

        {% if "SIMPLEUI_HOME_INFO"|get_config != False %}
        <el-col :span="18">
            {% else %}
            <el-col :span="24">
                {% endif %}

                <el-card class="box-card">
                    <div slot="header" class="clearfix">
                        <i class="fas fa-link"></i>
                        <span v-text="getLanuage('Quick navigation')"></span>
                    </div>
                    <div class="clearfix">
                        {% if "SIMPLEUI_HOME_QUICK"|get_config != False %}


                        <div v-for="(c,j) in models" :key="c.name" class="quick-wrap">

                            <a href="javascript:;" @click="openTab(c,(j+1)+'')">
                                <span class="icon" :class="c.icon"></span>
                                <span class="card-name" v-text="c.name"></span>
                            </a>
                        </div>

{#                        <div v-for="(c,j) in models">#}
{#                            <button @click="test123(c,(j+1)+'')">点击跳转test123</button>#}
{#                            <button @click="openTab(c,(j+1)+'')">点击跳转openTab</button>#}
{#                        </div>#}

                        <script>
                        function jump_to(target) {
                            console.log("*** home target: ", target);
                            window.app.openTab({
                                url: target.url,
                                icon: target.icon || 'fa fa-file',
                                name: target.name,
                                breadcrumbs: []
                            });
                        }
                        </script>

                        {% endif %}
                    </div>
                </el-card>
            </el-col>
            {% endif %}

            {% if "SIMPLEUI_HOME_INFO"|get_config != False %}
            <el-col :span="6">
                <el-card class="box-card">
                    <div slot="header" class="clearfix">

                        <span><i class="fab fa-stripe-s"></i>Simpleui <span
                                v-text="getLanuage('Home page')"></span></span>
                        <el-button style="float: right; padding: 3px 0" type="text" @click="report()"><span
                                v-text="getLanuage('Report issue')"></span></el-button>
                    </div>
                    <div class="float-wrap clearfix">
                        <div style="text-align: center">
                            {% get_app_info %}
                            <a v-if="upgrade.isUpdate" href="javascript:;" @click="upgrade.dialogVisible=true"
                               class="upgrade"><span class="el-icon-top"></span><span
                                    v-text="upgrade.version"></span></a>
                        </div>
                        <el-button icon="fas fa-code" @click="openUrl('https://gitee.com/tompeppa/simpleui')">Gitee
                        </el-button>
                        <el-button icon="fab fa-github" @click="openUrl('https://github.com/newpanjing/simpleui')">
                            Github
                        </el-button>
                    </div>
                </el-card>
            </el-col>

            {% endif %}
    </el-row>

    {% if "SIMPLEUI_HOME_ACTION"|get_config != False %}
    <el-card class="timeline">
        <div slot="header" class="clearfix">
            <span>{% trans 'Recent actions' %}</span>
            <el-button v-waves style="float: right; padding: 3px 0" type="text"
                       :icon="timeline?'el-icon-arrow-up':'el-icon-arrow-down'"
                       @click="displayTimeline()"></el-button>
        </div>
        {% load log %}
        {% get_admin_log 10 as admin_log for_user user %}
        {% if admin_log %}
        <transition name="el-zoom-in-top">
            <div class="block" v-if="timeline">
                <el-timeline>
                    {% for entry in admin_log %}
                    <el-timeline-item timestamp="{{ entry.action_time }}" placement="top">
                        <el-card>
                            <p>{{ entry.user }} {{ entry.action_time }}</p>
                            <h4 v-pre="true">{{ entry.content_type }}: {{ entry }}</h4>
                        </el-card>
                    </el-timeline-item>
                    {% endfor %}
                </el-timeline>
            </div>
        </transition>
        {% endif %}
    </el-card>
    {% endif %}


<el-row class="info-card">
    <el-card class="box-card">
{#        <div style="display: flex">#}
{#            <div id="main" style="width: 40%;height: 300%;">mainmainmainmain</div>#}
{#            <div id="right" style="width: 40%;height: 300%;">rightrightrightright</div>#}
{#        </div>#}
    <embed
        class="float-wrap clearfix"
        src="/api/home/"
        id="iframe"
        name="iframe"

        height="400px"
        width="100%"
        scrolling="auto"
        frameborder="0"
onload="changeFrameHeight()"
    />
        <script>
            function changeFrameHeight(){
                var ifm= document.getElementById("iframe");
                {#ifm.height=document.documentElement.clientHeight;#}
                ifm.height="400px";
                ifm.width="100%";
            }

            window.onresize=function(){
                 changeFrameHeight();
            }
        </script>
    </el-card>

    <script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.min.js" type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('right'));

        // 指定图表的配置项和数据
        var option = {
            title: {
                text: 'ECharts 入门示例'
            },
            tooltip: {},
            legend: {
                data:['销量', 'test']
            },
            xAxis: {
                data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
            },
            yAxis: {},
            series: [{
                    name: '销量',
                    type: 'bar',
                    data: [5, 20, 36, 10, 10, 20]
                },
                {
                    name: 'test',
                    type: 'bar',
                    data: [11, 13, 15, 14, 12, 10],
                    itemStyle: {
                normal: {
                  label: {
                    show: true,
                    position: 'top',
                    textStyle: {
                      color: 'black',
                      fontSize: 16,
                      textBorderWidth: 3,
                      borderColor: 'black',
                      borderWidth: 1,
                      padding: 3
                    }
                  }
                }
              }
                },
            ]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>

</el-row>


</div>

<el-dialog
        title="Upgrade Simpleui"
        :visible.sync="upgrade.dialogVisible"
        width="50%">
    <el-alert
            :title="'You can upgrade to '+upgrade.version"
            type="success">
    </el-alert>
    <div style="padding: 10px">
        <div>
            <h3>
            Run Command:
            </h3>
            <el-alert
                title="pip install django-simpleui -U"
                type="info">
              </el-alert>

        </div>
        <div><h3>Change logs:</h3></div>
        <div v-text="upgrade.body"></div>
    </div>
</el-dialog>

